/* 将页面铺满整个视图 */
.overspread {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

/* brand: SourceCheck的样式 */
.brand {
  line-height: 4.0;
  font-family: $font_family;
  font-size: 4rem;
  color: #fff;
  font-weight: 800;

  span:last-child {
    color: $standard_color
  }
}

/* 圆角总样式 */
.arc {
  width: 100%;
  height: 4rem;
  border-radius: 2rem;
}

/* 圆角的输入框 */
@mixin arc_input {
  @extend .arc;
  border: 0.1rem solid $neutral_ea_color;
  background-color: #FFF;
  color: #000;
  outline: none !important;
}

/* 圆角的按钮 */
@mixin arc_btn {
  @extend .arc;
  margin-top: 1rem;
  font-size: 2rem;
  background: $standard_color;
  border-color: $standard_color;
  box-shadow: 0.2rem 0.2rem 0.5rem $standard_color;
}

@mixin marked-words($color) {
  display: inline-block;
  padding-top: 0.3rem;
  font-size: 1.3rem;
  color: $color;
}

.text-danger {
  @include marked-words(red);
}

.text-white-list {
  @include marked-words(#fff);
}

.sider-collapse {
  width: 14px;
  height: 50px;
  margin: 0 10px 0 0;
  padding: 15px 0;
  display: inline-block;
  position: relative;
  text-align: center;
  top: 400px;
  left: 0;
  border: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #30355D;
}

.menuItem {
  vertical-align: middle;

  i {
    font-size: 1.8rem
  }

  span {
    display: inline-block;
    font-size: 1.6rem;
    padding-left: 5px;
  }
}

/* 菜单激活状态 */
.active {
  display: inline-block;
  border-left: 4px solid $standard_color;
  background: $assist_color_three;
}

@mixin background-linear-gradient($direction, $colorOne, $colorTwo) {
  background: linear-gradient($direction, $colorOne, $colorTwo);
}

/* 圆角矩形 */
.round-rectangle {
  width: 80px;
  height: 80px;
  @include background-linear-gradient(to bottom, #44AAF5, #4183F3);
  border-radius: 10px;
  text-align: center;
  margin: 0 10px;
}

.icon-sca {
  color: #fff;
  line-height: 80px;
  font-size: 42px;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 2px;
  background: $standard_color_hover;
  margin: 10px 0;
}

@mixin flex_style($justify) {
  display: flex;
  justify-content: $justify;
  align-items: center;
}

.overview-data {
  @include flex_style(space-evenly);
}

.overview-data-num {
  @include flex_style(space-between);
  padding: 0 10px;

  div:nth-child(2) {
    font-size: 2rem;
  }
}


.email-input {
  @include flex_style(flex-start);
}

@mixin dataBackground($background) {
  width: 533px;
  height: 160px;
  background: url($background) no-repeat center;
  background-size: 100%;
  padding: 45px 30px;
  font-size: 2rem;

  span:last-child {
    font-size: 3.6rem
  }
}

.data-one>.data-box:nth-child(1) {
  @include dataBackground('src/assets/imgs/data-blue.png');
}

.data-two>.data-box:nth-child(1) {
  @include dataBackground('src/assets/imgs/data-yellow.png');
}

.data-three>.data-box:nth-child(1) {
  @include dataBackground('src/assets/imgs/data-purle.png');
}


/* 下拉输入框的字体颜色 */
.form-select {
  width: 100%;
  color: #fff !important;
}

.email-form {
  background: #1C2B66;
  padding: 40px 40px 50px 40px;
}

.circle-square-one {
  @extend .round-rectangle;
  @include background-linear-gradient(to bottom, #15CFB7, #18cfb3);
  padding: 10px 0;
}

.circle-square-two {
  @extend .round-rectangle;
  @include background-linear-gradient(to bottom, #FF8754, #FF8856);
  padding: 10px 0;
}

.circle-square-three {
  @extend .round-rectangle;
  @include background-linear-gradient(to bottom, #3E6DEF, #3D6DF3);
  padding: 10px 0;
}

.circle-square-four {
  @extend .round-rectangle;
  @include background-linear-gradient(to bottom, #7C55FF, #7C56FF);
  padding: 10px 0;
}

/**************************** 图标字体的大小 **************************/
.icon-font {
  font-size: 42px;
}

/**************************************************************************/

/* 表格样式 */
.custom_table {
  margin-top: 30px;
}

/* 向右浮动 */
.float-right {
  text-align: right;
}

.pt-pb-30 {
  margin: 20px 0;
}

.pt-pb {
  padding: 12px 16px 16px;
}

/*重新定义：相似的样式进行封装（不同的是要放一个字母或两个字或三个字）
  1. 两边圆角
  2. 14px 白色字体
  3. 需要上下垂直居中
  */
@mixin classify {
  width: 5em;
  height: 2.143em;
  line-height: 2.143em;
  font-size: 0.875em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 1.79em;
}

.grade-E {
  @include classify();
  background-color: #F55B59;
}

.grade-D {
  @include classify();
  background-color: #FE7879;
}

.grade-C {
  @include classify();
  background-color: #AF8CF4;
}

.grade-B {
  @include classify();
  background-color: #FFA54D;
}

.grade-A {
  @include classify();
  background-color: #55c770;
}

.grade-default {
  @include classify();
  background-color: #d7dce3
}

.warning {
  color: #df4d4f;
  font-weight: bold
}

.detail-info {
  height: 100px;
  padding: 10px 20px !important;
  background-color: #fff;
}

.detail-title-info,
.application-title-info {
  font-size: 24px;
  font-weight: 600;
}

.detail-content-info {
  font-size: 16px;
  padding: 10px 0;
}

.detail-application {
  margin-top: 30px;
  background-color: #fff;
}

.detail-cve {
  margin-top: 30px;
}

.cve-application {
  height: 250px;
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
}

.cve-application2 {
  height: 100px;
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
}

// 垂直分割线
.detail-divider {
  text-align: center;
}

.detail-divider-vertical {
  width: 1px;
  height: 80px;
  font-size: 14px;
  line-height: 1.5;
  display: inline-block;
  color: rgba(0, 0, 0, .65);
  margin: 15px 0;
  background: #465FB1;
}

/* 组件：垂直分割线 */
.divider-vertical {
  width: 1px;
  height: 300px;
  font-size: 14px;
  line-height: 1.5;
  display: inline-block;
  color: rgba(0, 0, 0, .65);
  margin: 15px 0;
  background: #e8e8e8;
}

.deatail-box {
  padding: 10px 20px !important;
}

.application-title-info {
  padding: 10px 20px !important;
}

.application-content-info {
  font-size: 14px;
  font-weight: 300;
  padding: 5px 20px !important;
}

.no-data {
  font-size: 72px;
  font-weight: 700;
  text-align: center;
  color: #eee;
}

.heart {
  color: #55c772;
}

/* 状态：安全 危险 */
.safety,
.danger {
  font-size: 16px;
  font-weight: 600;
}

.safety {
  color: #55c772;
}

.danger {
  color: #df4d4f;
}

/* 封装 白色模板 */
.box {
  margin-top: 30px;
  background: #fff
}

.box-padding {
  padding: 20px !important;
}

.box-line-padding {
  padding: 10px 0 !important;
}

.box-title {
  font-size: 18px;
  font-weight: 600;
}

.list {
  width: 3.125em;
  padding: 0.625em !important;
  border: 1px solid #999999;
}

.font-style {
  font-family: SimHei,
}

@mixin m-bottom {
  display: inline-block;
  margin-bottom: 10px;
}

@mixin m-form {
  display: inline-block !important;
  margin-bottom: 10px !important;
}

/*模态框*/
.modal-box-star {
  color: red;
  font-weight: 600;
}

.modal-box-label {
  @include m-bottom();
}

.modal-box-form {
  @include m-form()
}

.modal-box-padding {
  padding-right: 5px !important;
}

.modal-box-radio {
  padding: 5px !important;
}

.margin-example {
  margin-top: 20px;
}

.echarts-box {
  background: #1C2B66;
}

.echarts-title {
  background: #162453;
  padding: 10px 20px;
}

.email {
  width: 200px;
}

tr {
  font-size: 14px;

  a {
    padding: 18px 18px 18px 0;
  }
}


// 风险级别icon色块 （项目列表，应用列表）
@mixin riskLevel {
  display: inline-block;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: sub;
  font-size: 0.875em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 50%;
}
.grade-high {
  @include riskLevel();
  background-color: #CB4649;
}
.grade-medium {
  @include riskLevel();
  background-color: #FFCD5C;
}
.grade-low {
  @include riskLevel();
  background-color: #B5E1F4;
}
.grade-E {
  @include riskLevel();
  background-color: #F55B59;
}

.grade-D {
  @include riskLevel();
  background-color: #FE7879;
}

.grade-C {
  @include riskLevel();
  background-color: #AF8CF4;
}

.grade-B {
  @include riskLevel();
  background-color: #FFA54D;
}

.grade-A {
  @include riskLevel();
  background-color: #55c770;
}

.grade-default {
  @include riskLevel();
  background-color: #d7dce3
} 

.mr-16 {
 margin: 0 16px 0 0;
}
.mt-16 {
  margin: 16px 0 0 0;
}
.tc {
  text-align: center;
}